import styled from 'styled-components'

export const ItemWrapper = styled.div`
	flex-shrink: 0;
	width: 20%;

	.inner {
		position: relative;
		padding: 8px;
		overflow: hidden;
	}

	.cover {
		width: 100%;
		border-radius: 4px;
	}

	.cover-bg {
		position: absolute;
		left: 8px;
		right: 8px;
		bottom: 0;
		height: 60%;
		border-bottom-left-radius: 4px;
		border-bottom-right-radius: 4px;
		background-image: linear-gradient(-180deg, rgba(0, 0, 0, 0) 3%, rgb(0, 0, 0) 100%);
	}

	.info {
		position: absolute;
		bottom: 32px;
		left: 50%;
		transform: translate(-50%, 0);
		text-align: center;
		display: flex;
		flex-direction: column;
		align-items: center;
		justify-content: center;
		color: #fff;
		z-index: 5;

		.name {
			font-size: 18px;
			font-weight: 700;
			margin: 5px 0;
		}

		.price {
			font-size: 14px;
			font-weight: 600;
		}
	}
`
